<template>
  <main>
    <div class="my_property">
      <h2>我的资产</h2>
      <ul class="one_flex">
        <li>
          <ul class="two_flex">
            <li>300<span>|</span></li>
            <li>有效积分</li>
          </ul>
        </li>
        <li>
          <ul class="two_flex">
            <li>0<span>|</span></li>
            <li>优惠券</li>
          </ul>
        </li>
        <li>
          <ul class="two_flex">
            <li>0</li>
            <li>权益券</li>
          </ul>
        </li>
      </ul>
    </div>
    <div class="kongbai"></div>
    <div class="my_serve">
      <h2>我的服务</h2>
      <ul class="my_serve_flex">
        <li>
          <ul class="my_serve_two_flex">
            <li class="iconfont icon-dingdan"></li>
            <li>我的订单</li>
          </ul>
        </li>
        <li>
          <ul class="my_serve_two_flex">
            <li class="iconfont icon-dingdan"></li>
            <li>我的资格码</li>
          </ul>
        </li>
        <li>
          <ul class="my_serve_two_flex">
            <li class="iconfont icon-laba"></li>
            <li>我的活动</li>
          </ul>
        </li>
        <li>
          <ul class="my_serve_two_flex">
            <li class="iconfont icon-shoucang"></li>
            <li>我的收藏</li>
          </ul>
        </li>
      </ul>
    </div>
    <div class="kongbai"></div>
    <div class="my_property">
      <h2>我的动态</h2>
      <ul class="one_flex">
        <li>
          <ul class="two_flex">
            <li>0<span>|</span></li>
            <li>关注</li>
          </ul>
        </li>
        <li>
          <ul class="two_flex">
            <li>0<span>|</span></li>
            <li>粉丝</li>
          </ul>
        </li>
        <li>
          <ul class="two_flex">
            <li>0</li>
            <li>获赞</li>
          </ul>
        </li>
      </ul>
    </div>
    <div class="tuichu" @click="tuichu">
      <span>退出登录</span>
    </div>
  </main>
</template>
<script>
export default {
  name: "wo",
  data() {
    return {};
  },
  methods: {
    tuichu() {
      sessionStorage.clear();
      this.$router.push({ path: "/" });
    },
  },
};
</script>
<style>
main {
  margin-bottom: 0.48rem;
}
.my_property {
  width: 3.75rem;
}
.my_serve {
  width: 3.75rem;
}
.my_serve h2 {
  padding-top: 0.2rem;
  text-indent: 0.1rem;
  font-size: 0.26rem;
  font-weight: 600;
}
.my_property h2 {
  padding-top: 0.2rem;
  text-indent: 0.1rem;
  font-size: 0.26rem;
  font-weight: 600;
}
.one_flex {
  padding-top: 20px;
  display: flex;
  justify-content: space-around;
  box-sizing: content-box;
}
.two_flex {
  width: 1.25rem;
  height: 0.75rem;
  text-align: center;
}
.two_flex li:nth-child(1) {
  color: orange;
  font-size: 0.26rem;
}
.two_flex li:nth-child(2) {
  color: black;
}

.my_serve_flex {
  padding-top: 20px;
  display: flex;
  justify-content: space-around;
  box-sizing: content-box;
}
.my_serve_two_flex {
  width: 。9rem;
  height: 0.75rem;
  text-align: center;
}
.my_serve_two_flex li:nth-child(1) {
  color: black;
  font-size: 0.35rem;
}
.my_serve_two_flex li:nth-child(2) {
  color: black;
  font-size: 16px;
}

.two_flex span {
  color: #f7f7f7;
  float: right;
}
.kongbai {
  width: 3.75rem;
  height: 0.15rem;
  background-color: #f7f7f7;
}
.tuichu span {
  display: block;
  width: 1rem;
  height: 0.4rem;
  border: 1px solid #f5f5f5;
  text-align: center;
  border-radius: 0.1rem;
  line-height: 0.4rem;
  margin: 0 auto;
}
.tuichu {
  margin-bottom: 0.55rem;
}
</style>
